<!--
 * @Author: lmh
 * @Date: 2021-08-11 14:41:26
 * @LastEditTime: 2021-08-11 14:54:54
 * @LastEditors: lmh
 * @Description: 自定义渲染器
-->
<template>
  <piechart @click="handleClick" :data="state.data" :x="200" :y="200" :r="200"></piechart>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({
      data: [
        { name: "大专", count: 200, color: "brown" },
        { name: "本科", count: 300, color: "yellow" },
        { name: "硕士", count: 100, color: "red" },
        { name: "博士", count: 50, color: "pink" },
      ],
    });

    function handleClick() {
      state.data.push({ name: "其他", count: 30, color: "orange" });
    }

    return {
      state,
      handleClick,
    };
  },
};
</script>

<style scoped>
</style>
